<template>
    <div class="label-title-container" :style="{
'border-bottom-color' : color || 'var(--el-color-primary)'
    }">
        <span :style="{
    'background-color' : color || 'var(--el-color-primary)'
        }">
            {{title}}
        </span>
    </div>
</template>

<script>
export default {
    props: {
        title: String,
        color: String
    }
}
</script>

<style lang="less" scoped>
.label-title-container {
    width: 100%;
    height: 30px;
    border-bottom: 2px solid var(--el-color-primary);
    margin: 2rem 0;

    span {
        color: #fff;
        background-color: var(--el-color-primary);
        display: inline-block;
        padding: 0 10px;
        height: 100%;
        font-size: 18px;
        line-height: 30px;
    }
}
</style>